<div ...attributes>
  <Apis::SubSettingsForm @model={{this.subSettingsModel}} @collection={{this.model.subSettings}} @roleOptions={{this.roleOptions}} @openModal={{this.openModal}} />

  <table id="sub_settings_table" class="table table-striped table-sm">
    <thead>
      <tr>
        <th style="width: 125px;">HTTP Method</th>
        <th>URL Matcher</th>
        <th></th>
        <th class="reorder-handle"></th>
      </tr>
    </thead>
    <tbody>
      {{#if this.model.subSettings}}
        {{#each this.model.subSettings as |subSettings|}}
          <tr data-guid={{guid-for subSettings}}>
            <td>{{subSettings.httpMethod}}</td>
            <td>{{subSettings.regex}}</td>
            <td class="table-row-actions" style="width: 90px; white-space: nowrap;">
              <a href="#" {{action "edit" subSettings}}><FaIcon @icon="pencil-alt" />Edit</a>
              <a href="#" class="remove-action" {{action "remove" subSettings}}><FaIcon @icon="times" />Remove</a>
            </td>
            <td class="reorder-handle"><FaIcon @icon="bars" /></td>
          </tr>
        {{/each}}
      {{else}}
        <tr class="empty"><td colspan="3">No sub-URL request settings have been added yet. Click "Add URL Settings" below to get started.</td></tr>
      {{/if}}
    </tbody>
  </table>
  <div class="row">
    <div class="col-6">
      <button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> Add URL Settings</button>
    </div>
    <div class="col-6 text-right">
      {{#if this.sortable.isReorderable}}
        <button type="button" id="sub_settings_reorder" class="btn btn-light btn-sm" {{on "click" (fn this.sortable.reorderCollection "sub_settings")}}><FaIcon @icon="bars" /> <span class="reorder-button-text">Reorder</span></button>
      {{/if}}
    </div>
  </div>
</div>
